<template>
  <!-- <el-button plain @click="centerDialogVisible = props.value"> Click to open the Dialog </el-button> -->

  <el-dialog
    v-model="centerDialogVisible"
    :title="`${isEdit ? '编辑' : '新增'}图书`"
    width="500"
    center
    @close="handleClose()"
  >
    <div>
      <el-form ref="form1" :rules="rules" :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="书名" prop="bookName">
          <el-input v-model="form.bookName" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" type="number" />
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.stock" type="number" />
        </el-form-item>
        <el-form-item label="详情" prop="shopMsg">
          <el-input v-model="form.shopMsg" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="handleSubmit()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineProps, watch, reactive, defineEmits } from 'vue'
import { ElForm } from 'element-plus'

import { changeBooksData, addBooksData } from '@/mock/api/index.ts'
const props = defineProps({
  value: {
    type: Boolean,
    require: true
  },
  bookItemData: {
    type: Array
  },
  isEdit: {
    type: Boolean
  }
})
const centerDialogVisible = ref(false)

const rules = {
  bookName: [{ required: true, trigger: 'blur', message: '必填' }],
  address: [{ required: true, trigger: 'blur', message: '必填' }],
  price: [{ required: true, trigger: 'blur', message: '必填' }],
  stock: [{ required: true, trigger: 'blur', message: '必填' }],
  shopMsg: [{ required: true, trigger: 'blur', message: '必填' }]
}

watch(
  () => props.value,
  () => {
    centerDialogVisible.value = props.value
  }
)

const form = ref<any>({
  id: '',
  bookName: '',
  address: '',
  price: '',
  stock: '',
  shopMsg: ''
})

watch(
  () => props.bookItemData,
  () => {
    if (props.bookItemData) {
      console.log('props.bookItemData', props.bookItemData)
      form.value = { ...props.bookItemData }
    }
  }
)
const emits = defineEmits(['input', 'updateBooksData'])

const handleClose = () => {
  emits('input', false)
  // console.log('关闭了')
}

const form1 = ref<typeof ElForm>()
const handleSubmit = async () => {
  form1.value?.validate(async (valid: boolean) => {
    if (valid) {
      // console.log('当前表格数据', form.value)
      if (form.value.id) {
        const res = await changeBooksData(form.value)
        // console.log('res', res)
        if (res.code === 200) {
          handleClose()
          emits('updateBooksData', res.data)
          // form.value.resetFields()
        }
      } else {
        // console.log('新增')
        const res = await addBooksData({ id: new Date(), ...form.value })
        // console.log('添加数据', res)
        handleClose()
        emits('updateBooksData', res)
        form.value = { id: '', bookName: '', address: '', price: '', stock: '', shopMsg: '' }
        form.value.resetFields()
      }
    }
  })
}
</script>
